<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
           aria-selected="true">Markdown</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
           aria-selected="false">Html</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
           aria-selected="false">Minder</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="row">
            <div class="col-md">
                <form>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1" style="color:#FFFFFF" id="type">type</label>
                        <select style="opacity:0.8;" class="form-control" id="mdtypesel">
                            <option value="web_article">web</option>
                            <option value="fpga_article">fpga</option>
                            <option value="algorithm_article">algorithm</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlInput1" style="color:#FFFFFF">title</label>
                        <input style="opacity:0.8;" type="text" class="form-control" id="mdtitle" placeholder="title">
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1" style="color:#FFFFFF">summary</label>
                        <textarea style="opacity:0.8;" class="form-control" id="mdsummary" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1" style="color:#FFFFFF">content</label>
                        <textarea style="opacity:0.8;" class="form-control" id="mdcontent" rows="10"></textarea>
                    </div>
                </form>

                <button class="btn btn-lg btn-outline-success btn-block" id="mdbtn">submit</button>
                <div id="restip"><br><br></div>
            </div>
            <div class="col-md" id="mdtext" style="color:#FFFFFF">
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <div class="row">
            <div class="col-md">
                <form>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1" style="color:#FFFFFF" id="type">type</label>
                        <select style="opacity:0.8;" class="form-control" id="htmltypesel">
                            <option value="web_article">web</option>
                            <option value="fpga_article">fpga</option>
                            <option value="algorithm_article">algorithm</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlInput1" style="color:#FFFFFF">title</label>
                        <input style="opacity:0.8;" type="text" class="form-control" id="htmltitle" placeholder="title">
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1" style="color:#FFFFFF">summary</label>
                        <textarea style="opacity:0.8;" class="form-control" id="htmlsummary" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1" style="color:#FFFFFF">content</label>
                        <textarea style="opacity:0.8;" class="form-control" id="htmlcontent" rows="10"></textarea>
                    </div>
                </form>

                <button class="btn btn-lg btn-outline-success btn-block" id="htmlbtn">submit</button>
                <div id="htmlrestip"><br><br></div>
            </div>
            <div class="col-md" id="htmltext" style="color:#FFFFFF">
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <div class="hvcenter">
            <button type="button" class="btn btn-dark" id="minderbtn">KityMinder Editor - Powered By FEX</button>
        </div>
    </div>
</div>

<script src="../static/admin/js/showdown.min.js"></script>
<script src="../static/admin/js/submit.min.js"></script>
<script>
    setInterval(function () {
        var converter = new showdown.Converter();
        var htmlxx = converter.makeHtml($("#mdcontent").val());
        $("#mdtext").html(htmlxx);
        $("#htmltext").html($("#htmlcontent").val());
    }, 1000);
</script>
